<template>
	<view class="container">
		<!-- 顶部导航 -->
		<view class="header">
			<uni-icons type="left" size="20" @click="goBack" />
			<text class="header-title">联系客服</text>
			<uni-icons type="more-filled" size="20" @click="showMore" />
		</view>

		<!-- 在线客服入口 -->
		<view class="service-card" @click="handleOnlineService">
			<view class="service-left">
				<image class="service-avatar" :src="serviceAvatar" mode="aspectFill" />
			</view>
			<view class="service-right">
				<text class="service-title">在线客服</text>
				<text class="service-time">在线时间：9:00-22:00</text>
			</view>
			<uni-icons type="right" size="16" color="#999" />
		</view>

		<!-- 其他联系方式 -->
		<view class="contact-list">
			<view class="contact-item" @click="handleCall">
				<view class="contact-icon">
					<uni-icons type="phone" size="24" color="#007AFF" />
				</view>
				<view class="contact-info">
					<text class="contact-title">客服热线</text>
					<text class="contact-desc">400-888-8888</text>
				</view>
			</view>

			<view class="contact-item" @click="handleCopyWechat">
				<view class="contact-icon">
					<uni-icons type="weixin" size="24" color="#07C160" />
				</view>
				<view class="contact-info">
					<text class="contact-title">官方微信</text>
					<text class="contact-desc">Express-Helper</text>
				</view>
			</view>

			<view class="contact-item" @click="handleFeedback">
				<view class="contact-icon">
					<uni-icons type="chat" size="24" color="#FF9500" />
				</view>
				<view class="contact-info">
					<text class="contact-title">意见反馈</text>
					<text class="contact-desc">帮助我们提供更好的服务</text>
				</view>
			</view>
		</view>

		<!-- 常见问题 -->
		<view class="faq-section">
			<view class="faq-header">
				<text class="faq-title">常见问题</text>
				<text class="view-all" @click="viewAllFaq">查看全部</text>
			</view>
			<view class="faq-list">
				<view class="faq-item" v-for="(item, index) in faqList" :key="index" @click="handleFaqClick(item)">
					<text class="faq-question">{{ item.question }}</text>
					<uni-icons type="right" size="14" color="#999" />
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue';

	const serviceAvatar = 'https://ai-public.mastergo.com/ai/img_res/db12a74ec6b1a86f9fc9982ac4e729fd.jpg';

	const faqList = ref([
		{ question: '如何修改取件时间？', id: 1 },
		{ question: '快递丢失如何赔付？', id: 2 },
		{ question: '如何申请退款？', id: 3 },
		{ question: '可以代取哪些快递？', id: 4 }
	]);

	const goBack = () => {
		uni.navigateBack();
	};

	const showMore = () => {
		uni.showActionSheet({
			itemList: ['分享', '投诉']
		});
	};

	const handleOnlineService = () => {
		uni.navigateTo({
			url: '/pages/chat/online'
		});
	};

	const handleCall = () => {
		uni.makePhoneCall({
			phoneNumber: '4008888888'
		});
	};

	const handleCopyWechat = () => {
		uni.setClipboardData({
			data: 'Express-Helper',
			success: () => {
				uni.showToast({
					title: '微信号已复制',
					icon: 'success'
				});
			}
		});
	};

	const handleFeedback = () => {
		uni.navigateTo({
			url: '/pages/feedback/index'
		});
	};

	const viewAllFaq = () => {
		uni.navigateTo({
			url: '/pages/help/faq'
		});
	};

	const handleFaqClick = (item : { id : number; question : string }) => {
		uni.navigateTo({
			url: `/pages/help/detail?id=${item.id}`
		});
	};
</script>

<style>
	page {
		height: 100%;
		background-color: #F5F5F5;
	}

	.container {
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 88rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #EEEEEE;
	}

	.header-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.service-card {
		margin: 20rpx 30rpx;
		padding: 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	}

	.service-left {
		margin-right: 20rpx;
	}

	.service-avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50rpx;
	}

	.service-right {
		flex: 1;
	}

	.service-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
		display: block;
	}

	.service-time {
		font-size: 12px;
		color: #999999;
		margin-top: 8rpx;
		display: block;
	}

	.contact-list {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 0 30rpx;
	}

	.contact-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.contact-item:last-child {
		border-bottom: none;
	}

	.contact-icon {
		width: 80rpx;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F5F7FA;
		border-radius: 40rpx;
		margin-right: 20rpx;
	}

	.contact-info {
		flex: 1;
	}

	.contact-title {
		font-size: 15px;
		color: #333333;
		display: block;
	}

	.contact-desc {
		font-size: 13px;
		color: #999999;
		margin-top: 8rpx;
		display: block;
	}

	.faq-section {
		margin: 20rpx 30rpx;
		background-color: #FFFFFF;
		border-radius: 12rpx;
		padding: 30rpx;
	}

	.faq-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.faq-title {
		font-size: 16px;
		font-weight: 500;
		color: #333333;
	}

	.view-all {
		font-size: 13px;
		color: #007AFF;
	}

	.faq-list {
		display: flex;
		flex-direction: column;
	}

	.faq-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 0;
		border-bottom: 1px solid #EEEEEE;
	}

	.faq-item:last-child {
		border-bottom: none;
	}

	.faq-question {
		font-size: 14px;
		color: #666666;
	}
</style>